<template>
  <el-container>
    <!-- 顶部 -->
    <el-header>
      <div>
        <span>CRM SYSTEM</span>
      </div>
      <div>
        <span style="margin-right: 20px; font-size: 15px; font-weight: 100">{{
          username
        }}</span>
        <el-button type="info" @click="logout">退出</el-button>
      </div>
    </el-header>
    <div class="nav">
      <el-menu
        :default-active="activePath"
        class="el-menu-demo"
        mode="horizontal"
        router
      >
        <el-menu-item index="info" @click="saveNavState">
          员工信息
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">销售管理</template>
          <el-menu-item index="plan" @click="saveNavState">
            销售计划
          </el-menu-item>
          <el-menu-item index="foretell" @click="saveNavState">
            销售预测
          </el-menu-item>
          <el-menu-item index="perf" @click="saveNavState">
            销售绩效
          </el-menu-item>
          <el-menu-item index="chance" @click="saveNavState">
            机会管理
          </el-menu-item>
          <el-menu-item index="competition" @click="saveNavState">
            竞争管理
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="analysis" @click="saveNavState"
          >销售分析</el-menu-item
        >
      </el-menu>
    </div>
    <!-- 展示区 -->
    <div class="main">
      <router-view></router-view>
    </div>
  </el-container>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "home",
  data() {
    return {
      username: "",
      activePath: "",
    };
  },
  created() {
    this.activePath = sessionStorage.getItem("activePath");
  },
  mounted() {
    pubsub.subscribe("Reload", (_, data) => {
      if (data === "reload") {
        sessionStorage.setItem("activePath", "info");
        this.activePath = sessionStorage.getItem("activePath");
      }
    });
    this.getUserName();
  },
  methods: {
    // 退出登录
    async logout() {
      const confirmResult = await this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult != "confirm") return;
      sessionStorage.clear();
      this.$router.push("/login");
    },
    // 保存链接的激活状态
    saveNavState(VueComponent) {
      sessionStorage.setItem("activePath", VueComponent.index);
      this.activePath = VueComponent.index;
    },
    // 获取用户名字
    async getUserName() {
      const { data: res } = await this.$http.post("/user/getname", {
        id: sessionStorage.getItem("token"),
      });
      if (res.status !== 200) {
        this.$message.error("系统错误，请重新登陆！");
        sessionStorage.clear();
        this.$router.push("/login");
        return;
      }

      pubsub.publish("loginUser", res.data);
      this.username = res.data;
    },
  },
};
</script>

<style scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: rgb(40, 74, 119);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(228, 228, 228);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  padding-right: 60px;
}

.el-header div {
  display: flex;
  align-items: center;
}

.el-header div span {
  margin-left: 15px;
}

.nav {
  width: 100%;
  margin-top: 20px;
  padding: 0 100px;
}

.main {
  height: 80%;
  margin: 20px 80px;
}
</style>
